<template>
	<view class="big-box">
		<view class="head-box common">
			<view class="close-box" @tap="close">取消</view>
			<view class="title">发表观点</view>
			<view class="close-box">发布</view>
		</view>
		<view>
			<textarea placeholder="告诉他你的观点" class="viewpoint"></textarea>
		</view>
		<view class="chargeBox common">
			<view class="charge-title">收费围观</view>
			<switch @change="switch1Change" />
		</view>
		<view class="bottom-box common">
			<view class="left-box common" @tap="selectAlbum">
				<image src="../../../static/jingjie/album.png"></image>
				<view class="album-box">图片/视频</view>
			</view>
			<view class="center-box"></view>
			<view class="left-box common" @tap="shot">
				<image src="../../../static/jingjie/shot.png"></image>
				<view class="album-box">拍摄</view>
			</view>
		</view>
		<view class="rule-box" v-if="isShow">
			<view class="top-box">
				<view class="head-title">猫币分配规则</view>
				<view class="head-conent">所获猫币将依次分配给观点发布者、平台和话题发布者</view>
			</view>
			<view class="bottom-box-rule common">
				<view class="close-rule" @tap="closeMask">取消</view>
				<view class="close-rule active" @tap="closeMask">确定</view>
			</view>
		</view>
		<mask :isShowMask="isShowMask" @closeMask="closeMask"></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	export default {
		data() {
			return {
				isShowMask: true,
				isShow:true
			};
		},
		components: {
			mask
		},
		methods: {
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			close() {
				uni.navigateBack({
					delta: 1
				})
			},
			selectAlbum() { //从相册选择

			},
			shot() {
				uni.createCameraContext({
					takePhoto: {

					},
					startRecord: {

					}
				})
			},
			closeMask() { //
				this.isShow=false
				this.isShowMask=false
			}
		}
	}
</script>

<style scoped>
	.big-box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.head-box {
		width: 100%;
		height: 128upx;
		padding: 0 24upx;
		padding-top: 70upx;
		padding-bottom: 23upx;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(230, 230, 230, 1);
	}

	.close-box {
		color: rgba(102, 102, 102, 1);
		font-size: 32upx;
	}

	.title {
		color: rgba(51, 51, 51, 1);
		font-size: 36upx;
	}

	.viewpoint {
		width: 100%;
		padding: 21upx 23upx;
		box-sizing: border-box;
		font-size: 26upx;
		color: rgba(153, 153, 153, 1);
	}

	.chargeBox {
		width: 100%;
		height: 88upx;
		background-color: white;
		padding: 0 24upx;
		box-sizing: border-box;
		position: absolute;
		bottom: 100upx;
	}

	.charge-title {
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	.bottom-box {
		width: 100%;
		height: 80upx;
		background-color: white;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
	}

	.center-box {
		width: 1px;
		height: 36upx;
		background: rgba(230, 230, 230, 1);
	}

	.left-box {
		width: 49%;
		height: 80upx;
		display: flex;
		justify-content: center;
	}

	.album-box {
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 16upx;
	}

	.left-box image {
		width: 44upx;
		height: 44upx;
	}

	.rule-box {
		width: 492upx;
		height: 282upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -141upx;/*高的一半*/
        margin-left: -246upx;/*宽的一半*/
		z-index: 1000;
	}
	.top-box{
		width: 100%;
		height: 205upx;
		border-bottom: 1upx solid rgba(230,230,230,1);
		padding: 40upx 80upx;
		box-sizing: border-box;
		padding-bottom: 50upx;
		box-sizing: border-box;
	}
	.head-title{
		width: 100%;
		font-size: 32upx;
		color:rgba(51,51,51,1);
		font-weight: bold;
		text-align: center;
	}
	.head-conent{
		font-size: 24upx;
		color:rgba(51,51,51,1);
		text-align: center;
		margin-top: 30upx;
	}
	.bottom-box-rule{
		width: 100%;
		height: 78upx;
	}
	.close-rule{
		width: 50%;
		font-size: 28upx;
		text-align: center;
		color:rgba(0,138,255,1);
		border-right: 1upx solid rgba(230,230,230,1);
	}
	.close-rule.active{
		border:none;
	}
</style>
